<!-- /components/ScrollSelectList.vue -->
<template>
	<view class="scroll-select-container">
		<scroll-view
			scroll-y
			class="scroll-view"
			:style="{ height: listHeight }"
			@scrolltolower="onScrollToLower"
			:scroll-with-animation="false"
		>
			<!-- 列表项 -->
			<view
				v-for="(item, index) in list"
				:key="index"
				class="list-item"
				:class="{ selected: isItemSelected(item) }"
				@click="selectItem(item)"
			>
				<text class="item-text">{{ item.text }}</text>
				<uni-icons
					v-if="isItemSelected(item)"
					type="checkbox-filled"
					size="20"
					color="#007AFF"
				/>
			</view>

			<!-- 加载中 -->
			<view v-if="loading && hasMore" class="loading-tip">
				<uni-load-more status="loading" iconType="auto" />
			</view>

			<!-- 无更多数据 -->
			<view v-if="!hasMore && !loading" class="loading-tip text-gray">
				— 已加载全部数据 —
			</view>

			<!-- 空状态 -->
			<view v-if="list.length === 0 && !loading" class="empty-tip">
				{{ emptyText }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'ScrollSelectList',
	props: {
		// 列表数据
		list: {
			type: Array,
			default: () => [],
		},
		// 当前选中值
		modelValue: {
			type: [String, Number, Object],
			default: null,
		},
		// 空状态提示
		emptyText: {
			type: String,
			default: '暂无数据',
		},
		// 列表高度
		height: {
			type: String,
			default: '400rpx',
		},
		// 是否还有更多数据
		hasMore: {
			type: Boolean,
			default: true,
		},
		// 是否正在加载
		loading: {
			type: Boolean,
			default: false,
		},
	},
	emits: ['update:modelValue', 'change', 'load-more'],
	computed: {
		listHeight() {
			return this.height;
		},
	},
	methods: {
		selectItem(item) {
			const newValue = this.isItemSelected(item) ? null : item;
			this.$emit('update:modelValue', newValue);
			this.$emit('change', newValue);
		},
		isItemSelected(item) {
			const { modelValue } = this;
			if (!modelValue || !item) return false;

			// 如果 modelValue 是对象且有 value
			if (typeof modelValue === 'object' && modelValue.value != null) {
				return String(modelValue.value) === String(item.value);
			}

			// 否则直接比较 value（字符串化）
			return String(modelValue) === String(item.value);
		},
		// 滚动到底部，触发加载更多
		onScrollToLower() {
			if (this.hasMore && !this.loading) {
				this.$emit('load-more');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.scroll-select-container {
	width: 100%;
	overflow: hidden;
}

.scroll-view {
	background-color: #fff;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28rpx 32rpx;
	font-size: 28rpx;
	text-align: center;
	color: #333;
	background-color: #fff;
	transition: all 0.2s ease;

	&:active {
		background-color: #f5f5f5;
	}

	&.selected {
		background-color: #e6f7ff;
		color: #007aff;
		font-weight: 500;
		border-left: 6rpx solid #007aff;
	}
}

.item-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-tip,
.loading-tip {
	text-align: center;
	color: #999;
	font-size: 28rpx;
	padding: 30rpx 0;
}

.text-gray {
	opacity: 0.8;
}
</style>